<template>
  <div id="assembly-date-picker">
    <h2>日期</h2>
    <bf-datePicker
      style="width: 200px"
      type="datetime"
      placeholder="请选择日期"
      v-model="date"
      @change="dateChange"
      format="yyyy/MM/dd HH:mm"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>范围</h2>
    <bf-datePicker
      type="daterange"
      style="width: 300px"
      placeholder="请选择日期"
      v-model="daterange"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>年</h2>
    <bf-datePicker
      type="year"
      style="width: 200px"
      placeholder="请选择年"
      v-model="dateYear"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>月</h2>
    <bf-datePicker
      type="month"
      style="width: 200px"
      placeholder="请选择月"
      v-model="dateMonth"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>周</h2>
    <bf-datePicker
      style="width: 200px"
      type="week"
      placeholder="请选择周"
      :disabled-date="disabledDate"
      v-model="dateWeek"
      @change="dateChange"
      clearable
      show-week-number
      format="yyyy-WW"
      :render-html="true"
    ></bf-datePicker>

    <h2>日期时间</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期和时间"
      type="datetime"
      v-model="dateTime"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>日期时间范围</h2>
    <bf-datePicker
      style="width: 400px"
      placeholder="请选择日期和时间"
      type="datetimerange"
      v-model="dateTimeRange"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>显示快捷方式</h2>
    <bf-datePicker
      type="daterange"
      style="width: 300px"
      placeholder="请选择日期"
      v-model="dateShortcuts"
      :shortcuts="shortcutsrange"
      @change="dateChange"
      :render-html="true"
    ></bf-datePicker>

    <h2>禁用指定日期</h2>
    <bf-datePicker
      style="width: 300px"
      placeholder="请选择日期"
      v-model="dateDisabledDate"
      :disabled-date="disabledDate"
      @change="dateChange"
      :render-html="true"
    ></bf-datePicker>

    <h2>禁用指定日期</h2>
    <bf-datePicker
      style="width: 300px"
      type="daterange"
      placeholder="请选择日期"
      v-model="dateDisabledRange"
      :disabled-date="disabledDateRange"
      @change="dateChange"
      :render-html="true"
    ></bf-datePicker>

    <h2>格式化日期</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      v-model="dateFormat"
      format="yyyy年MM月dd日"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>多选multiple</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      v-model="dateMultiple"
      @change="dateChange"
      clearable
      multiple
      :render-html="true"
    ></bf-datePicker>

    <h2>显示周数</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      v-model="dateWeekNumber"
      @change="dateChange"
      show-week-number
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>只读</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      v-model="dateReadonly"
      readonly
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>禁用</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      v-model="dateDisabled"
      disabled
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>不可输入</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      v-model="dateNoEditable"
      :editable="false"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>自定义触发器</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      v-model="dateSlot"
      :open="open"
      @change="dateChange"
      clearable
      :render-html="true"
    >
      <bf-button type="text" @click="open = !open">触发日期框打开关闭</bf-button>
    </bf-datePicker>

    <h2>mini</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      size="mini"
      v-model="dateMini"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>small</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      size="small"
      v-model="dateSmall"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>default</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      v-model="dateDefault"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>large</h2>
    <bf-datePicker
      style="width: 200px"
      placeholder="请选择日期"
      size="large"
      v-model="dateLarge"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>

    <h2>手动获取失去焦点</h2>
    <div>
      <bf-button @click="handleFocus">获取焦点</bf-button>
      <bf-button @click="handleBlur">失去焦点</bf-button>
    </div>
    <bf-datePicker
      style="width: 200px"
      ref="focusDate"
      placeholder="请选择日期"
      v-model="dateFocus"
      @change="dateChange"
      clearable
      :render-html="true"
    ></bf-datePicker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateMultiple: [],
      dateWeek: "2020-31",
      date: "",
      daterange: ["2020-11-11", "2021-1-1"],
      dateYear: "",
      dateMonth: "",
      dateTime: "",
      dateTimeRange: [],
      dateWeekNumber: "",
      dateShortcuts: "",
      dateFormat: "",
      dateReadonly: "",
      dateDisabled: "",
      dateDisabledDate: "",
      dateDisabledRange: [],
      dateNoEditable: "",
      dateSlot: "",
      dateMini: "",
      dateSmall: "",
      dateDefault: "",
      dateLarge: "",
      dateFocus: "",
      shortcuts: [
        {
          text: "今天",
          onClick(picker) {
            const date = new Date();
            picker.setValue(date);
          },
        },
        {
          text: "昨天",
          onClick(picker) {
            const date = new Date();
            date.setDate(date.getDate() - 1);
            picker.setValue(date);
          },
        },
        {
          text: "一周之前的某一天",
          onClick(picker) {
            const date = new Date();
            date.setDate(date.getDate() - 7);
            picker.setValue(date);
          },
        },
      ],
      shortcutsrange: [
        {
          text: "最近一周",
          onClick(picker) {
            const date1 = new Date();
            const date2 = new Date();
            date1.setDate(date1.getDate() - 7);
            picker.setValue([date1, date2]);
          },
        },
        {
          text: "一个月",
          onClick(picker) {
            const date1 = new Date();
            const date2 = new Date();
            date1.setDate(date1.getDate() - 30);
            picker.setValue([date1, date2]);
          },
        },
        {
          text: "三个月",
          onClick(picker) {
            const date1 = new Date();
            const date2 = new Date();
            date1.setDate(date1.getDate() - 90);
            picker.setValue([date1, date2]);
          },
        },
      ],
      open: false,
    };
  },
  methods: {
    dateChange(date) {
      console.log(date, "dateChange");
    },
    disabledDate(date) {
      return date && new Date(date).getTime() < Date.now();
    },
    disabledDateRange(date) {
      return date && new Date(date).getTime() < Date.now();
    },
    handleFocus() {
      this.$refs.focusDate.focus();
    },
    handleBlur() {
      this.$refs.focusDate.blur();
    },
  },
};
</script>

<style lang='scss'>
#assembly-date-picker {
  width: 1200px;
  height: auto;
  margin: 50px auto;
}
</style>
